<script setup lang="ts">
import { getRecommendListApi } from "@/apis/music/recommend";
import router from "@/router";
import type { getRecommendList } from "@/types/recommend";
import { onBeforeMount, ref } from "vue";
const recommendList = ref<getRecommendList[]>([]);
onBeforeMount(async () => {
  const recommendListRes = await getRecommendListApi();
  //   console.log(recommendListRes);
  recommendList.value = recommendListRes.data.result;
});
const toListItem = (item: getRecommendList) => {
  router.push({ path: "/MusicList", query: { id: item.id } });
};
</script>
<template>
  <div class="recommendList">
    <el-card style="max-width: 100%" shadow="always">
      <template #header>
        <div class="card-header">
          <span>推荐歌单</span>
          <span class="moreList">更多>>></span>
        </div>
      </template>
      <div class="card-body">
        <div
          v-for="item in recommendList"
          :key="item.id"
          class="recommend_item"
          @click="toListItem(item)"
        >
          <img :src="item.picUrl" alt="" />
          <p>{{ item.name }}</p>
        </div>
      </div>
    </el-card>
  </div>
</template>
<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .moreList {
    font-size: 12px;
  }
}
.card-body {
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  height: 100%;
  column-gap: 15px;
  flex-wrap: wrap;
  row-gap: 20px;
  .recommend_item {
    flex: 1;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    row-gap: 10px;
    img {
      width: 150px;
      height: 150px;
      border-radius: 10px;
      box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    }
    p {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      font-size: 14px;
    }
  }
}
</style>
